<template>
	<div class="system-add-user-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
			<el-form ref="ruleFormRef" :model="state.ruleForm" size="default" label-width="90px" :rules="rules">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="角色名称" prop="roleName">
							<el-input v-model="state.ruleForm.roleName" placeholder="请输入角色名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="备注" prop="remark">
							<el-input v-model="state.ruleForm.remark" placeholder="请输入备注" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="授权">
							<el-tree ref="menuTreeRef" :data="state.menuTreeData" show-checkbox node-key="id"
								:props="defaultProps" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="tennatRoleDialog">
import { reactive, ref, nextTick } from 'vue';


import { useTenantApi } from "/@/api/tenant";
import { useMenuApi } from '/@/api/menu'

const tenantApi = useTenantApi()
const menuApi = useMenuApi();

const menuTreeRef = ref();
const ruleFormRef = ref();

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

const state = reactive({
	ruleForm: {
		roleName: '',
		remark: '',
	},
	menuTreeData: [],
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});
const defaultProps = {
	children: 'children',
	label: 'name',
}
const rules = reactive({
	roleName: [
		{ required: true, message: '角色名不能为空', trigger: 'blur' },
	],
})
// 打开弹窗
const openDialog = async (type, id) => {

	let menuTreeRes = await menuApi.menuTree()
	state.menuTreeData = menuTreeRes.data.list;

	if (type === 'edit') {
		state.dialog.title = '修改角色';
		state.dialog.submitTxt = '修 改';

		tenantApi.tenantRoleInfo(id).then(res => {
			state.ruleForm.roleName = res.data.roleName;
			state.ruleForm.id = res.data.id;
			state.ruleForm.remark = res.data.remark;

			// 找出所有父节点id
			const parentIds = state.menuTreeData.map(item => item.id)
			console.log(parentIds);
			// 从获取的已选择的数据中过滤掉父节点id，从而得到所有子节点id
			const childrenIds = res.data.menuIds.filter(id => !parentIds.includes(id))
			// 选中子节点，这时候父节点的选中状态就会成为合理的选择状态，即: 选中所有子节点-父节点呈现选中状态  不选中所有子节点-父节点会呈现半选中状态
			menuTreeRef.value.setCheckedKeys(childrenIds)

		})


	} else {
		state.dialog.title = '新增角色';
		state.dialog.submitTxt = '新 增';
		// 清空表单，此项需加表单验证才能使用
		nextTick(() => {
			ruleFormRef.value.resetFields();
		});
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;

};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 新增
const onSubmit = () => {
	if (!ruleFormRef.value) return
	ruleFormRef.value.validate((valid) => {
		if (valid) {

			let checkedKeys = menuTreeRef.value.getCheckedKeys(false);
			let halfCheckedKeys = menuTreeRef.value.getHalfCheckedKeys(true)
			let menuIds = []
				.concat(
					checkedKeys,
					halfCheckedKeys
				)


			if (state.dialog.type === 'edit') {
				let params = {
					"id": state.ruleForm.id,
					"roleName": state.ruleForm.roleName,
					"remark": state.ruleForm.remark,
					"menuIds": menuIds,
				}
				tenantApi.tenantRoleUpdate(params).then(() => {
					closeDialog();
					emit("refresh")
				})
			} else {
				let params = {
					"roleName": state.ruleForm.roleName,
					"remark": state.ruleForm.remark,
					"menuIds": menuIds,
				}
				tenantApi.tenantRoleAdd(params).then(() => {
					closeDialog();
					emit("refresh")
				})
			}


		}
	})
};


// 暴露变量
defineExpose({
	openDialog,
});

</script>
